<template>
  <div>
    <addBoard @work-end="getBoard" />
    <el-card>
      <el-skeleton
        v-show="loading"
        :rows="5"
        animated
      />
      <el-table
        v-show="!loading"
        :data="boardList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <!-- <el-table-column
          label="图片"
          prop="pic"
          align="center"
        >
          <template #default="scope">
            <span v-if="!scope.row.pic">无图片</span>
            <div v-else>
              <img
                :src="`${scope.row.pic}`"
                style="width: 100%;"
              >
            </div>
          </template>
</el-table-column> -->
        <el-table-column
          label="话题导图"
          prop="icon"
          align="center"
        >
          <template #default="scope">
            <span v-if="!scope.row.icon">暂无图片</span>
            <div v-else>
              <img
                :src="`${scope.row.icon}`"
                style="width: 100%;"
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="话题名称"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
        />
        <el-table-column label="操作">
          <template #default="operate">
            <div style="display: flex">
              <changeBoard
                :key="operate.row.sectionId"
                :section-id="operate.row.sectionId"
                :name="operate.row.name"
                :description="operate.row.description"
                button-style="margin: 0px 5px 0px 0px;"
                @work-end="getBoard"
              />
              <el-button
                type="danger"
                :loading="deleteBoardLoading"
                @click="deleteBoard(operate.row.sectionId)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import * as api from '@/api/point/board'
import addBoard from './components/addBoard.vue'
import changeBoard from './components/changeBoard.vue'

const loading = ref(false)

const boardList = ref([])

const getBoardListQuery = reactive({
  type: 1
})

function getBoard () {
  loading.value = true
  api.getBoard(
    getBoardListQuery
  ).then((res) => {
    boardList.value = res
    loading.value = false
  }).catch(() => {
    ElMessage.error('获取数据失败')
    loading.value = false
  })
}

const deleteBoardLoading = ref(false)

function deleteBoard (data) {
  deleteBoardLoading.value = true
  api.deleteBoard({
    sectionId: data
  }).then(() => {
    getBoard()
    deleteBoardLoading.value = false
  }).catch(() => {
    ElMessage.error('操作失败')
    deleteBoardLoading.value = false
  })
}

onMounted(() => {
  getBoard()
})
</script>
